<template>
	<view>
		<fui-search-bar @search="search" background="#f3f5fa" searchColor="black"></fui-search-bar>
	</view>
	 <view class="container">
	    <view class="title">热门推荐</view>
	    <view class="tags">
	      <view class="tag" v-for="(item, index) in tags" :key="index">
	        <text v-if="item.icon" class="icon">{{ item.icon }}</text>
	        <text>{{ item.text }}</text>
	      </view>
	    </view>
	  </view>
</template>

<script>
	export default {
	  data() {
	    return {
	      tags: [
	        { icon: '🔥', text: '故宫' },
	        { icon: '🔥', text: '三星堆' },
	        { text: '莫高窟' },
	        { text: '秦俑' },
	        { text: '长城' },
	        { text: '黄鹤楼' },
	        { text: '乐山大佛' },
	        { text: '小西天' },
	      ]
	    };
	  }
	};
</script>

<style>
.container {
  padding: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.tag {
  background-color: #f5f5f5;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 8rpx;
  color: #ff5b5b;
}
</style>
